<template>
  <div class="environment">
    <div class="itemlist">
      <span v-for="(item, index) in items" :key="index"
        style="font-size: .2rem; font-weight: lighter; display: block; ">{{ item
        }}</span>
    </div>
    <div class="lineItem" v-for="(item, index) in 5" :key="index">
      <div class="row">
        <span class="title">
          {{ index + 1 }}号棚
        </span>
        <span style="margin-left: .065rem;">{{ data[index].temperature }}</span>
        <span>{{ data[index].humidity }}</span>
        <span>{{ data[index].co2 }}</span>
        <span>{{ data[index].o2 }}</span>
        <span>{{ data[index].nh3 }}</span>
        <span>{{ data[index].wind }}</span>
        <span>{{ data[index].pressure }}</span>
        <span>{{ data[index].light }}</span>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';


const items = [
  "温度",
  "湿度",
  "二氧化碳",
  // "氧气",
  "氨气",
  // "风速",
  "负压",
  "光照",
]

const data = ref([
  {
    temperature: "12.3",
    humidity: "45.5" + "%",
    co2: "820",
    // o2: "800" + "ppm",
    nh3: "320",
    // wind: "800" + "m/s",
    pressure: "660" + "hPa",
    light: "772" + "lux"
  },
  {
    temperature: "12.2",
    humidity: "43.5" + "%",
    co2: "826",
    // o2: "800" + "ppm",
    nh3: "310",
    // wind: "800" + "m/s",
    pressure: "630" + "hPa",
    light: "732" + "lux"
  },
  {
    temperature: "11.0",
    humidity: "44.5" + "%",
    co2: "830",
    // o2: "800" + "ppm",
    nh3: "344",
    // wind: "800" + "m/s",
    pressure: "643" + "hPa",
    light: "743" + "lux"
  },
  {
    temperature: "11.4",
    humidity: "46.5" + "%",
    co2: "824",
    // o2: "800" + "ppm",
    nh3: "333",
    // wind: "800" + "m/s",
    pressure: "674" + "hPa",
    light: "774" + "lux"
  },
  {
    temperature: "11.7",
    humidity: "44.5" + "%",
    co2: "844",
    // o2: "800" + "ppm",
    nh3: "323",
    // wind: "800" + "m/s",
    pressure: "667" + "hPa",
    light: "734" + "lux"
  },
])


</script>

<style lang="less" scoped>
.environment {
  position: relative;
  width: 5.625rem;
  height: 3.75rem;
  background-image: url(../assets/imgs/icon_hksb_new.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: .75rem .15rem .25rem;
  box-sizing: border-box;
  margin-top: .15rem;

  .itemlist {
    margin-left: .625rem;
    display: flex;
    justify-content: space-between;
    padding-top: .125rem;
    padding-bottom: .0625rem;
    font-size: .15rem;
    padding-right: .375rem;
  }


  .lineItem {
    .row {
      margin-top: .1875rem;
      color: red;

      .title {
        color: rgb(0, 144, 255);
        font-size: .175rem;
      }

      span {
        margin-right: .14rem;
        font-size: .2rem;
      }
    }

    // .row:nth-child(2) {
    //   color: red;
    // }

  }
}
</style>